<template>
  <div class="player-detail">
    <t-navbar title="陪玩详情" :fixed="true"/>
    <!-- 顶部信息区 -->
    <div class="header">
      <div class="top-bar">
        <t-button variant="text" shape="square" @click="goBack" class="nav-button">
          <icon-font name="chevron-left" />
        </t-button>
        <div class="title">玩家详情</div>
        <t-button variant="text" shape="square" @click="toggleFavorite" class="nav-button">
          <icon-font :name="isFavorite ? 'heart-filled' : 'heart'" />
        </t-button>
      </div>
      
      <div class="player-info">
        <div class="player-basic">
          <div class="badge" :class="{ active: companion.online }">
            {{ companion.online ? '在线' : '离线' }}
          </div>
          <div class="avatar-container">
            <img :src="companion.avatar" class="avatar" alt="玩家头像" />
          </div>
          <div class="info-block">
            <div class="name">{{ companion.name }}</div>
            <div class="rating">
              <t-rate
                :value="companion.rating"
                :count="5"
                :show-text="false"
                disabled
                size="small"
              />
              <span class="rate-value">{{ companion.rating }}/5.0</span>
              <span class="reviews-count">({{ companion.reviewCount }})</span>
            </div>
          </div>
        </div>
        
        <div class="tags-row">
          <div 
            v-for="(tag, index) in companion.tags" 
            :key="index" 
            class="tag"
          >{{ tag }}</div>
        </div>
      </div>
    </div>
    
    <!-- 价格与预约区 -->
    <div class="action-section">
      <div class="price-block">
        <div class="price">¥<span class="price-value">{{ companion.price }}</span>/小时</div>
        <div class="price-desc">服务价格</div>
      </div>
      <t-button 
        theme="primary" 
        block 
        size="large" 
        class="book-btn" 
        @click="handleBookNow"
      >立即预约</t-button>
    </div>
    
    <!-- 详情标签页 -->
    <div class="tabs-section">
      <t-tabs v-model="activeTab" swipeable :show-bottom-line="false">
        <t-tab-panel value="about" label="简介">
          <div class="tab-content">
            <div class="about-section">
              <div class="section-title">关于我</div>
              <div class="about-text">{{ playerIntro }}</div>
              
              <div class="section-title">技能介绍</div>
              <div class="skill-bars">
                <div 
                  v-for="(skill, index) in playerSkills" 
                  :key="index"
                  class="skill-item"
                >
                  <div class="skill-name">{{ skill.name }}</div>
                  <div class="skill-bar-bg">
                    <div 
                      class="skill-bar-fill" 
                      :style="{ width: skill.level + '%' }"
                    ></div>
                  </div>
                  <div class="skill-level">{{ skill.level }}%</div>
                </div>
              </div>
            </div>
          </div>
        </t-tab-panel>
        
        <t-tab-panel value="services" label="服务">
          <div class="tab-content">
            <div class="services-list">
              <div 
                v-for="(service, index) in companion.services" 
                :key="index"
                class="service-item"
              >
                <div class="service-icon">
                  <icon-font :name="service.icon" />
                </div>
                <div class="service-content">
                  <div class="service-title">{{ service.name }}</div>
                  <div class="service-desc">{{ service.description }}</div>
                </div>
              </div>
            </div>
          </div>
        </t-tab-panel>
        
        <t-tab-panel value="reviews" label="评价">
          <div class="tab-content">
            <div class="ratings-summary">
              <div class="rating-number">{{ companion.rating }}</div>
              <div class="rating-stars">
                <t-rate
                  :value="companion.rating"
                  :count="5"
                  :show-text="false"
                  disabled
                />
              </div>
              <div class="rating-count">{{ companion.reviewCount }}条评价</div>
            </div>
            
            <div class="reviews-list">
              <div 
                v-for="(review, index) in companion.reviews" 
                :key="index"
                class="review-item"
              >
                <div class="review-header">
                  <img :src="review.avatar" class="reviewer-avatar" alt="评价人头像" />
                  <div class="reviewer-info">
                    <div class="reviewer-name">{{ review.name }}</div>
                    <div class="review-date">{{ review.time }}</div>
                  </div>
                </div>
                <div class="review-rating">
                  <t-rate
                    :value="review.rating"
                    :count="5"
                    :show-text="false"
                    disabled
                    size="small"
                  />
                </div>
                <div class="review-text">{{ review.text }}</div>
              </div>
            </div>
          </div>
        </t-tab-panel>
      </t-tabs>
    </div>
    
    <!-- 底部栏 -->
    <div class="bottom-actions">
      <div class="action-buttons">
        <t-button variant="outline" icon="chat" class="contact-btn">联系</t-button>
        <t-button variant="outline" icon="share" class="share-btn">分享</t-button>
      </div>
      <t-button theme="primary" class="book-now-btn" @click="handleBookNow">立即预约</t-button>
    </div>
    
    <!-- 预约弹窗 -->
    <t-dialog
      v-model:visible="showBookingDialog"
      title="预约服务"
      width="90%"
      :footer="false"
    >
      <div class="booking-form">
        <t-form :data="bookingData" ref="form">
          <t-form-item label="选择日期">
            <t-date-picker
              v-model="bookingData.date"
              placeholder="选择日期"
              clearable
            />
          </t-form-item>
          
          <t-form-item label="选择时间">
            <t-time-picker
              v-model="bookingData.time"
              placeholder="选择时间"
              clearable
            />
          </t-form-item>
          
          <t-form-item label="服务时长">
            <t-select
              v-model="bookingData.duration"
              :options="durationOptions"
              placeholder="选择时长"
              clearable
            />
          </t-form-item>
          
          <t-form-item label="留言备注">
            <t-textarea
              v-model="bookingData.remark"
              placeholder="有什么需要告诉对方的..."
              maxlength="100"
              :autosize="{ minRows: 3, maxRows: 5 }"
              show-limit-number
            />
          </t-form-item>
        </t-form>
        
        <div class="total-price">
          <span class="price-label">预约总价:</span>
          <span class="price-amount">¥{{ calculateTotalPrice() }}</span>
        </div>
        
        <div class="dialog-footer">
          <t-button variant="outline" @click="cancelBooking">取消</t-button>
          <t-button theme="primary" @click="confirmBooking">确认预约</t-button>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeTab = ref('about');
const showBookingDialog = ref(false);
const isFavorite = ref(false);

// 陪玩师数据
const companion = ref({
  id: 1,
  name: "游戏小仙女",
  avatar: "https://tse2-mm.cn.bing.net/th/id/OIP-C.g5MgjmRcOiMpqZ7kPYVRHAHaHY?rs=1&pid=ImgDetMain",
  rating: 4.9,
  reviewCount: 1234,
  price: 30,
  online: true,
  tags: ["王者荣耀", "和平精英", "技术指导", "首单优惠"],
  services: [
    { icon: "game", name: "游戏陪玩", description: "提供专业的游戏陪玩服务，带你体验不一样的游戏乐趣。" },
    { icon: "mic", name: "语音聊天", description: "轻松愉快的语音聊天，分享游戏经验和生活趣事。" },
    { icon: "user", name: "技能指导", description: "针对性提供游戏技能指导，帮助你快速提升游戏水平。" },
  ],
  reviews: [
    {
      avatar: "https://tse2-mm.cn.bing.net/th/id/OIP-C.g5MgjmRcOiMpqZ7kPYVRHAHaHY?rs=1&pid=ImgDetMain",
      name: "用户A",
      rating: 4.8,
      text: "陪玩小姐姐声音很好听，游戏技术也很棒！我们一起打了几把排位，全胜，还教了我很多游戏技巧，很有耐心。",
      time: "2024-01-01",
    },
    {
      avatar: "https://tse3-mm.cn.bing.net/th/id/OIP-C.b7PMBD5HLWPqHAmW7hH-FQHaHZ?rs=1&pid=ImgDetMain",
      name: "用户B",
      rating: 5.0,
      text: "非常愉快的陪玩体验，小姐姐技术很好又温柔，聊天很舒服，下次还会再来！",
      time: "2024-01-02",
    },
  ],
});

// 玩家自我介绍
const playerIntro = ref("嗨，我是游戏小仙女，一名专业的游戏陪玩。我有5年的游戏经验，精通多款热门游戏，能够提供专业的游戏指导和愉快的陪玩体验。无论你是想提升游戏技巧，还是单纯寻找游戏伙伴，我都能满足你的需求。期待和你一起度过愉快的游戏时光！");

// 玩家技能
const playerSkills = ref([
  { name: '王者荣耀', level: 95 },
  { name: '和平精英', level: 90 },
  { name: '英雄联盟', level: 85 },
  { name: '绝地求生', level: 80 }
]);

// 预约表单数据
const bookingData = reactive({
  date: '',
  time: '',
  duration: '',
  remark: ''
});

// 服务时长选项
const durationOptions = [
  { label: '1小时', value: '1' },
  { label: '2小时', value: '2' },
  { label: '3小时', value: '3' },
  { label: '4小时', value: '4' }
];

// 计算总价
const calculateTotalPrice = () => {
  const hours = bookingData.duration ? parseInt(bookingData.duration) : 0;
  return hours * companion.value.price;
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 切换收藏状态
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
};

// 处理立即预约
const handleBookNow = () => {
  showBookingDialog.value = true;
};

// 取消预约
const cancelBooking = () => {
  showBookingDialog.value = false;
};

// 确认预约
const confirmBooking = () => {
  console.log('预约信息:', bookingData);
  showBookingDialog.value = false;
  // 这里可以添加预约成功的提示
};
</script>

<style scoped>
.player-detail {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 70px;
}

/* 顶部区域样式 */
.header {
  padding-bottom: 20px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

.nav-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-info {
  padding: 0 16px;
}

.player-basic {
  display: flex;
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  right: 0;
  background-color: #999;
  color: white;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 10px;
}

.badge.active {
  background-color: #13c2c2;
}

.avatar-container {
  margin-right: 16px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
}

.info-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.rating {
  display: flex;
  align-items: center;
}

.rate-value {
  margin-left: 8px;
  font-size: 14px;
  color: #333;
}

.reviews-count {
  margin-left: 4px;
  font-size: 12px;
  color: #999;
}

.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tag {
  background-color: #f5f5f5;
  color: #666;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
}

/* 价格与预约区 */
.action-section {
  padding: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 8px solid #f5f5f5;
}

.price-block {
  flex: 1;
  margin-right: 16px;
}

.price {
  font-size: 14px;
  color: #333;
}

.price-value {
  font-size: 24px;
  font-weight: 600;
  color: #fa541c;
}

.price-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.book-btn {
  flex: 2;
  background-color: #fa541c;
  border-color: #fa541c;
}

/* 标签页内容 */
.tabs-section {
  flex: 1;
}

.tab-content {
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 16px 0 12px;
}

.about-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.skill-bars {
  margin: 16px 0;
}

.skill-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.skill-name {
  width: 80px;
  font-size: 14px;
  color: #333;
}

.skill-bar-bg {
  flex: 1;
  height: 6px;
  background-color: #f5f5f5;
  border-radius: 3px;
  margin: 0 12px;
}

.skill-bar-fill {
  height: 100%;
  background-color: #13c2c2;
  border-radius: 3px;
}

.skill-level {
  width: 40px;
  font-size: 12px;
  color: #666;
  text-align: right;
}

/* 服务列表 */
.services-list {
  padding: 8px 0;
}

.service-item {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}

.service-item:last-child {
  border-bottom: none;
}

.service-icon {
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #fa541c;
  font-size: 20px;
}

.service-content {
  flex: 1;
}

.service-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 6px;
}

.service-desc {
  font-size: 14px;
  color: #999;
  line-height: 1.5;
}

/* 评价模块 */
.ratings-summary {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 16px;
}

.rating-number {
  font-size: 36px;
  font-weight: 600;
  color: #fa541c;
}

.rating-stars {
  margin: 8px 0;
}

.rating-count {
  font-size: 12px;
  color: #999;
}

.reviews-list {
  padding: 8px 0;
}

.review-item {
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.reviewer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 12px;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  font-size: 14px;
  color: #333;
}

.review-date {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.review-rating {
  margin-bottom: 8px;
}

.review-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  padding: 12px 16px;
  border-top: 1px solid #f5f5f5;
  z-index: 10;
}

.action-buttons {
  display: flex;
  margin-right: 12px;
}

.contact-btn, .share-btn {
  margin-right: 8px;
}

.book-now-btn {
  flex: 1;
  background-color: #fa541c;
  border-color: #fa541c;
}

/* 预约表单 */
.booking-form {
  padding: 8px;
}

.total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #f5f5f5;
  margin-top: 16px;
}

.price-label {
  font-size: 15px;
  color: #333;
}

.price-amount {
  font-size: 20px;
  font-weight: 600;
  color: #fa541c;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
</style>